<template>
  <!--数据驾驶舱-->
  <el-row style="height:100%">
    <page :column='false'>
      <div class="bg" :class="{fullscreen:isFull}">
        <canvas id="canvas"></canvas>
        <i class="full-screen iconfont icon-quanping" @click="FullClick()"></i>
        <realHeader>
          <div class="sumBlock clear">
            <div class="yellow" >
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('enters')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>本周总客流量</h6>
                <h3><span id="weekFlow">0</span>人</h3>
                <p class="sum-p" :class="headData.week.sumFlow.tb>999?'duo':''">
                  <span class="sum-p-span1">比上月</span>
                  <span class="sum-p-span2">
                    <i :class="headData.week.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.week.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                    {{headData.week.sumFlow.tb==null||headData.week.sumFlow.tb===''?'':Math.abs(headData.week.sumFlow.tb)}}%
                  </span>
                  <span class="sum-p-span1">比上期</span>
                  <span class="sum-p-span2">
                    <i :class="headData.week.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.week.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                    {{headData.week.sumFlow.hb==null||headData.week.sumFlow.hb===''?'':Math.abs(headData.week.sumFlow.hb)}}%
                  </span>
                </p>
              </div>
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('actual_sales')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>本周总销售额</h6>
                <h3>￥<span id="weekSale">0</span></h3>
                <p class="sum-p">
                  <span class="sum-p-span1">比上月</span>
                  <span class="sum-p-span2">
                  <i :class="headData.week.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.week.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.week.sumSale.tb==null||headData.week.sumSale.tb===''?'':Math.abs(headData.week.sumSale.tb)}}%
                </span>
                  <span class="sum-p-span1">比上期</span>
                  <span class="sum-p-span2">
                  <i :class="headData.week.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.week.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.week.sumSale.hb==null||headData.week.sumSale.hb===''?'':Math.abs(headData.week.sumSale.hb)}}%
                </span>
                </p>
              </div>
            </div>
            <div class=" yellow">
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('enters')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>本月总客流量</h6>
                <h3><span id="monthFlow">0</span>人</h3>
                <p class="sum-p">
                  <span class="sum-p-span1">比去年</span>
                  <span class="sum-p-span2">
                  <i :class="headData.month.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.month.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.month.sumFlow.tb==null||headData.month.sumFlow.tb===''?'':Math.abs(headData.month.sumFlow.tb)}}%
                </span>
                  <span class="sum-p-span1">比上月</span>
                  <span class="sum-p-span2">
                  <i :class="headData.month.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.month.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.month.sumFlow.hb==null||headData.month.sumFlow.hb===''?'':Math.abs(headData.month.sumFlow.hb)}}%
                </span>
                </p>
              </div>
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('actual_sales')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>本月总销售额</h6>
                <h3>￥<span id="monthSale">0</span></h3>
                <p class="sum-p">
                  <span class="sum-p-span1">比去年</span>
                  <span class="sum-p-span2">
                  <i :class="headData.month.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.month.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.month.sumSale.tb==null||headData.month.sumSale.tb===''?'':Math.abs(headData.month.sumSale.tb)}}%
                </span>
                  <span class="sum-p-span1">比上月</span>
                  <span class="sum-p-span2">
                  <i :class="headData.month.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.month.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.month.sumSale.hb==null||headData.month.sumSale.hb===''?'':Math.abs(headData.month.sumSale.hb)}}%
                </span>
                </p>
              </div>
            </div>
            <div class="mid yellowan">
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('enters')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>今日总客流量</h6>
                <h3><span id="dayFlow">0</span>人</h3>
                <p class="sum-p">
                  <span class="sum-p-span1">比上周</span>
                  <span class="sum-p-span2">
                  <i :class="headData.day.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.day.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.day.sumFlow.tb==null||headData.day.sumFlow.tb===''?'':Math.abs(headData.day.sumFlow.tb)}}%
                </span>
                  <span class="sum-p-span1">比昨天</span>
                  <span class="sum-p-span2">
                  <i :class="headData.day.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.day.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.day.sumFlow.hb==null||headData.day.sumFlow.hb===''?'':Math.abs(headData.day.sumFlow.hb)}}%
                </span>
                </p>
              </div>
              <div class="sum"
                   v-loading="!headCompanyKPIlist.includes('actual_sales')"
                   element-loading-text="无该指标权限"
                   element-loading-spinner="el-icon-warning-outline"
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <h6>今日总销售额</h6>
                <h3>￥<span id="daySale">0</span></h3>
                <p class="sum-p">
                  <span class="sum-p-span1">比上周</span>
                  <span class="sum-p-span2">
                  <i :class="headData.day.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.day.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.day.sumSale.tb==null||headData.day.sumSale.tb===''?'':Math.abs(headData.day.sumSale.tb)}}%
                </span>
                  <span class="sum-p-span1">比昨天</span>
                  <span class="sum-p-span2">
                  <i :class="headData.day.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.day.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                  {{headData.day.sumSale.hb==null||headData.day.sumSale.hb===''?'':Math.abs(headData.day.sumSale.hb)}}%
                </span>
                </p>
              </div>
            </div>
          </div>
        </realHeader>
        <div class="box">
          <div class="realrow clear">
            <!--企业客流统计-->
            <div class="realblock"
                 v-loading="!headCompanyKPIlist.includes('enters')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h3>客流分析</h3>
              <div class="eleblock">
                <companyPassengerFlow
                  :id="'companyPassengerFlow'" ref="companyPassengerFlowRef"
                  :companyPassengerFlowData="companyPassengerFlowData"></companyPassengerFlow>
              </div>
            </div>
            <!--销售数据-->
            <div class=" realblock"
                 v-loading="!headCompanyKPIlist.includes('actual_sales')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h3>销售数据</h3>
              <div class="eleblock">
                <companySale
                  :id="'companySale'" :companySaleData="companySaleData"
                  ref="companySaleRef"></companySale>
              </div>
            </div>
            <div class="mid">
              <div class="text">
                <div class="con"
                     v-loading="!headCompanyKPIlist.includes('enters')"
                     element-loading-text="无该指标权限"
                     element-loading-spinner="el-icon-warning-outline"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                  <h6>客流量<span style="font-size: 12px">(进入人数)</span></h6>
                  <h3>{{sumEnt.atv}}人</h3>
                  <p class="sum-p">
                    <span class="sum-p-span1">年同比</span>
                    <span class="sum-p-span2">
                      <i
                        :class="sumEnt.tb<0?'el-icon-caret-bottom':(!!sumEnt.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{sumEnt.tb==null||sumEnt.tb===''?'':Math.abs(sumEnt.tb)}}%
                    </span>
                    <span class="sum-p-span1">环比</span>
                    <span class="sum-p-span2">
                      <i
                        :class="sumEnt.hb<0?'el-icon-caret-bottom':(!!sumEnt.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                       {{sumEnt.hb==null||sumEnt.hb===''?'':Math.abs(sumEnt.hb)}}%
                    </span>
                  </p>
                </div>
                <div class="con"
                     v-loading="!headCompanyKPIlist.includes('actual_sales')"
                     element-loading-text="无该指标权限"
                     element-loading-spinner="el-icon-warning-outline"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                  <h6>销售金额</h6>
                  <h3>￥{{sumSale.atv}}</h3>
                  <p class="sum-p">
                    <span class="sum-p-span1">年同比</span>
                    <span class="sum-p-span2">
                      <i :class="sumSale.tb<0?'el-icon-caret-bottom':(!!sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{sumSale.tb==null||sumSale.tb===''?'':Math.abs(sumSale.tb)}}%
                    </span>
                    <span class="sum-p-span1">环比</span>
                    <span class="sum-p-span2">
                     <i :class="sumSale.hb<0?'el-icon-caret-bottom':(!!sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                       {{sumSale.hb==null||sumSale.hb===''?'':Math.abs(sumSale.hb)}}%
                    </span>
                  </p>
                </div>
              </div>
              <div class="text">
                <div class="con"
                     v-loading="!headCompanyKPIlist.includes('guest_avg_price')"
                     element-loading-text="无该指标权限"
                     element-loading-spinner="el-icon-warning-outline"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                  <h6>客单价</h6>
                  <h3>￥{{sumATV.atv}}</h3>
                  <p class="sum-p">
                    <span class="sum-p-span1">年同比</span>
                    <span class="sum-p-span2">
                      <i
                        :class="sumATV.tb<0?'el-icon-caret-bottom':(!!sumATV.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{sumATV.tb==null||sumATV.tb===''?'':Math.abs(sumATV.tb)}}%
                    </span>
                    <span class="sum-p-span1">环比</span>
                    <span class="sum-p-span2">
                     <i
                       :class="sumATV.hb<0?'el-icon-caret-bottom':(!!sumATV.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                       {{sumATV.hb==null||sumATV.hb===''?'':Math.abs(sumATV.hb)}}%
                    </span>
                  </p>
                </div>
                <div class="con"
                     v-loading="!headCompanyKPIlist.includes('sold_rate')"
                     element-loading-text="无该指标权限"
                     element-loading-spinner="el-icon-warning-outline"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                  <h6>成交率</h6>
                  <h3>{{sumSold.atv}}%</h3>
                  <p class="sum-p">
                    <span class="sum-p-span1">年同比</span>
                    <span class="sum-p-span2">
                     <i
                       :class="sumSold.tb<0?'el-icon-caret-bottom':(!!sumSold.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{sumSold.tb==null||sumSold.tb===''?'':Math.abs(sumSold.tb)}}%
                    </span>
                    <span class="sum-p-span1">环比</span>
                    <span class="sum-p-span2">
                     <i
                       :class="sumSold.hb<0?'el-icon-caret-bottom':(!!sumSold.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{sumSold.hb==null||sumSold.hb===''?'':Math.abs(sumSold.hb)}}%
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="realrow clear">
            <!--公司级别案场排行-->
            <div class="realblock"
                 v-loading="!headCompanyKPIlist.includes('enters')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h3>案场客流排行</h3>
              <div class="eleblock realRank">
                <realCaseRank :RankTop8="RankTop8.passengerFlow"></realCaseRank>
              </div>
            </div>
            <!--成交率-->
            <div class="realblock">
                <h3>成交率</h3>
                <div class="eleblock">
                  <dealSell  :item_list="item_list"></dealSell>
                </div>
            </div>
            <div class="realblock mid"
                 v-loading="!headCompanyKPIlist.includes('actual_sales')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
                <h3>案场销售排行</h3>
                <div class="eleblock realRank">
                  <realCaseRank :RankTop8="RankTop8.sale"></realCaseRank>
                </div>
            </div>
          </div>
          <div class="realrow2 clear">
            <!--公司级别案场排行-->
            <div class="realblock"
                 v-loading="realHeaderData.idsTyp"
                 element-loading-text="选择案场时，无该数据"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h3>城市数据均值分布图</h3>
              <div class="eleblock realRank">
                <cityAvg
                  :id="'cityAvgData'" :cityAvgData="cityAvgData"
                  ref="cityAvgData"></cityAvg>
              </div>
            </div>
            <!--成交率-->
            <div class="realblock"
                 v-loading="realHeaderData.idsType"
                 element-loading-text="选择案场时，无该数据"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h3>城市客流均值排行</h3>
              <div class="eleblock realRank">
                <realCaseRank :RankTop8="RankTop8.companyAvg"></realCaseRank>
              </div>
            </div>
          </div>
        </div>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  @font-face {
    font-family: aliwebfont;//自定义字体名称
    src: url('/static/css/webfont.ttf');
  }

  .bg {
    width: 98%;
    padding: 0 30px 20px 30px;
    background: #000;
    position: absolute;
    top: 116px;
    left: 50%;
    transform: translateX(-50%);

    i {
      &.el-icon-caret-top {
        color: #8f1316;
      }

      &.el-icon-caret-bottom {
        color: #009344;
      }
    }

    #canvas, #particles-js {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
      z-index: -1;
    }

    .full-screen {
      color: #fff;
      opacity: 0.5;
      font-size: 28px;
      cursor: pointer;
      position: absolute;
      top: 20px;
      right: 13px;
      transition: all 0.5s;

      &:hover {
        opacity: 1;
      }
    }

    .sumBlock {
      margin-bottom: 30px;
      width: 100%;
      background: url(/static/img/cockpik/headtitle.png) no-repeat 0px 100%;
      background-size: 100%;
      padding-bottom: 10px;

      > div {
        float: left;
        width: 32%;
        background-size: 100% 100%;
        padding: 0 4px;

        &.mid {
          float: none;
          margin: 0 auto;

          .sum {
            position: relative;

            h6 {
              color: #fdd469;
            }

            h3 {
              background: url("/static/img/cockpik/bg_yellow.png") no-repeat;
              background-size: 100% 100%;
              color: #fdd469;
            }

            .sum-p {
              color: #fdd469;
              .sum-p-span1{
                display:inline-block;
                width: 50%;
                text-align: right;
                padding-right:20px;
                font-size: 14px;
              }
              .sum-p-span2{
                display:inline-block;
                width: 50%;
                text-align: left;
                padding-left:20px;
                font-size: 14px;
              }
            }
          }
        }

        &:nth-child(2) {
          float: right;
        }

        .sum {
          padding: 8px 0 9px 0;
          width: 48%;
          float: left;
          height: 128px;
          position: relative;

          &:nth-child(2) {
            float: right;
          }

          h6 {
            color: #4485c8;
            font-size: 16px;
            text-align: center;
            position: relative;
            z-index: 3000;
            font-weight: 400;
          }

          h3 {
            font-size: 28px;
            text-align: center;
            color: #73b4ff;
            margin-top: 4px;
            background: url("/static/img/cockpik/bg_blue.png") no-repeat;
            background-size: 100% 100%;
            padding: 8px 0;
          }

          .sum-p {
            position: absolute;
            bottom: 0px;
            color: #4485c8;
            text-align: center;
            width: 100%;
            font-size: 0px;
            height: 42px;
            .sum-p-span1{
              display:inline-block;
              width: 50%;
              text-align: right;
              padding-right:20px;
              font-size: 14px;
            }
            .sum-p-span2{
              display:inline-block;
              width: 50%;
              text-align: left;
              padding-left:20px;
              font-size: 14px;
            }
            &.duo {
              span {
                left: 3%;

                &:last-child {
                  right: 3%;
                }
              }
            }
          }
        }
      }
    }

    .box {
      width: 100%;

      .realrow {
        height: 362px;
        width: 100%;
        margin-bottom: 20px;

        > div {
          width: 32%;
          height: 100%;
          padding: 5px;

          &.realblock {
            background: url("/static/img/cockpik/titleorborder.png") no-repeat;
            background-size: 100% 100%;
            float: left;

          }

          &:nth-child(2) {
            float: right;
          }

          &.mid {
            float: none;
            margin: 0 auto;

            .text {
              width: 100%;
              height: 167px;
              display: flex;
              justify-content: space-between;

              &:first-child {
                margin-bottom: 20px;
              }

              .con {
                width: 48%;
                height: 100%;
                background: url("/static/img/cockpik/bg_bule.png") no-repeat;
                background-size: 100% 100%;
                padding: 8px 0 18px 0;
                position: relative;

                h6 {
                  color: #51a0fc;
                  font-size: 16px;
                  text-align: center;
                  font-weight: 400;
                  position: relative;
                  z-index: 3000;
                }

                h3 {
                  font-size: 24px;
                  text-align: center;
                  color: #73b4ff;
                  margin-top: 22px;
                }

                .sum-p {
                  position: absolute;
                  bottom: 14px;
                  color: #3c74af;
                  width: 100%;
                  font-size: 0px;
                  .sum-p-span1{
                    display:inline-block;
                    width: 50%;
                    text-align: right;
                    padding-right:20px;
                    font-size: 14px;
                  }
                  .sum-p-span2{
                    display:inline-block;
                    width: 50%;
                    text-align: left;
                    padding-left:20px;
                    font-size: 14px;
                  }
                }
              }
            }
          }

          > h3 {
            display: block;
            font-size: 18px;
            text-align: left;
            line-height: 40px;
            background-size: 100% 100%;
            position: relative;
            color: #51a0fc;
            z-index: 3000;
            text-indent: 25px;
          }

          .eleblock {
            width: 100%;
            height: 87%;
            overflow: hidden;
            background-size: 100% 100%;
            &.realRank {
              padding: 10px 20px 0 20px;
            }
          }
        }
      }

      .realrow2 {
        height: 362px;
        width: 100%;
        margin-bottom: 20px;

        > div {
          width: 66%;
          height: 100%;
          padding: 5px;

          &.realblock {
            background: url("/static/img/cockpik/titleorborder.png") no-repeat;
            background-size: 100% 100%;
            float: left;
          }

          &:nth-child(2) {
            width: 32%;
            float: right;
          }

          > h3 {
            display: block;
            font-size: 18px;
            text-align: left;
            line-height: 40px;
            background-size: 100% 100%;
            position: relative;
            color: #51a0fc;
            z-index: 3000;
            text-indent: 25px;
          }

          .eleblock {
            width: 100%;
            height: 87%;
            overflow: hidden;
            background-size: 100% 100%;

            &.realRank {
              padding: 10px 20px 0 20px;
            }
          }
        }
      }
    }
  }

  .bg-tips {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    position: absolute;
    z-index: 100;

    span {
      display: inline-block;
      color: #7d7e80;
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 20px;
      font-weight: 600;
      transform: translateX(-50%) translateY(-50%);
    }
  }

  .fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    padding: 0 30px 20px 30px;
    overflow-y: auto;
  }
  


@media screen and (max-width: 1440px){

    .bg .sumBlock > div .sum h6{
    font-size: 14px;
  }
  .bg .sumBlock > div .sum h3{
    font-size: 22px;
  }
  .bg .sumBlock > div.mid .sum h6{
    font-size: 14px;
  }
  .bg .sumBlock > div.mid .sum h3{
    font-size: 22px;
  }
  .bg .sumBlock > div .sum .sum-p .sum-p-span1{
    font-size: 12px;
    padding-right:10px;
  }
  .bg .sumBlock > div .sum .sum-p .sum-p-span2{
    font-size: 12px;
    padding-left:10px;
  }
  .bg .sumBlock > div.mid .sum .sum-p .sum-p-span1{
    font-size: 12px;
    padding-right:10px;
  }
  .bg .sumBlock > div.mid .sum .sum-p .sum-p-span2{
    font-size: 12px;
    padding-left:10px;
  }
  .realHeader .condit > div > span{
    font-size: 13px;
  }
  .bg .box .realrow > div > h3{
    font-size: 16px;
    font-weight: 400;
  }
}
</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";   
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  import realHeader from "@/components/analyzeRealTime/realheader";//头部条件
  import companyPassengerFlow from "@/components/analyzeRealTime/companyPassengerFlow";//企业级客流统计图
  import companySale from "@/components/analyzeRealTime/companySale";//企业销售统计图
  import cityAvg from "@/components/analyzeRealTime/cityAvg";//企业销售统计图
  import realCaseRank from "@/components/analyzeRealTime/realCaseRank";//企业级客流排行组件
  import dealSell from "@/components/analyzeRealTime/dealSell";//轮播滚动
  export default {
    data() {
      return {
        headCompanyKPIlist:[],//当前选择的总企业指标列表
        KPIlist:[],//当前选择的企业或案场
        company_id: '',//公司id
        realHeaderData:{
          company_ids:'',//企业id
          case_ids:'',//案场id
          idsType:0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day:moment(new Date()).format("YYYY-MM-DD"),
          end_day:moment(new Date()).format("YYYY-MM-DD"),
        },
        company_ids: '',//多选企业ids
        start_day: moment().format('YYYY-MM-DD'),
        end_day: moment().format('YYYY-MM-DD'),
        start_hm: '00:00',
        end_hm: '23:59',
        RankTop8: {
          passengerFlow:[],//客流排行
          sale:[],//销售排行
          companyAvg:[],//城市客流均值排行
        },
        item_list: [],
        companyPassengerFlowData: {
          xData: '',
          yData: '',
        },
        companySaleData: {
          xData: '',
          yData: '',
        },
        cityAvgData:{
          xData: '',
          yData: '',
        },
        global: '',//公共参数
        isFull: false,//是否全屏
        headData:{
          day:{
            sumFlow:{     //今日总客流量
              enters:"",
              tb:null,    
              hb:null,
            },
             sumSale:{     //今日总销售额
              sale:"",
              tb:null,    
              hb:null,
            },
          },
          week:{
            sumFlow:{     //上月总客流量
              enters:"",
              tb:null,    
              hb:null,
            },
             sumSale:{     //上月总销售额
              sale:"",
              tb:null,    
              hb:null,
            },
          },
          month:{
            sumFlow:{     //上月总客流量
              enters:"",
              tb:null,    
              hb:null,
            },
             sumSale:{     //上月总销售额
              sale:"",
              tb:null,    
              hb:null,
            },
          }
        },
        sumEnt:{      //进入人数
          atv:"",
          tb:null,
          hb:null,
        },
        sumSale:{      //销售金额
          atv:"",
          tb:null,
          hb:null,
        },
        sumATV:{      //今日销售总额/总客流量  客单价
          atv:"",
          tb:null,    
          hb:null,
        },         
        sumSold:{     //今日总成交率 
          sold:"",
          tb:null,    
          hb:null,
        },
        refresh:null,
      }
    },
    components: {
      page,
      realHeader,
      companyPassengerFlow,
      companySale,
      realCaseRank,
      cityAvg,
      dealSell
    },
    created() {
      for (let i in reportGlobal.queryList) {
        if (reportGlobal.queryList[i].name == '实时数据驾驶舱') {
          this.global = reportGlobal.queryList[i]
        }
      }
    },
    mounted() {
      this.$Bus.$on('companyData',data=>{
        this.company_id = data.id
        this.$Bus.$emit('Loading', true);
        this.getHeadCompanyKpis(data.id,1)
      })
      this.$Bus.$on('realHeaderDataChange', data => {
        if(!data.company_ids){
          this.$message.warning('请至少选择一个企业')
          return
        }
        this.realHeaderData = data
        if (this.realHeaderData.idsType) {
          let ids = data.case_ids.split(',')
          this.getKpis(ids,(data.idsType + 1))
        } else {
          let ids = data.company_ids.split(',')
          this.getKpis(ids,(data.idsType + 1))
        }
        this.$Bus.$emit('Loading', true);
      });

      this.refresh = setInterval(()=>{
        this.getRankPassengerFlow();
        this.getRankSale();
        this.getCompanyData();
        this.getCompanyAvg();
        this.getCompanyAvgRank()
        if (this.realHeaderData.idsType) {
          this.getFullTimeCaseData()
        } else {
          this.getFullTimeCompanyData()
        }
        this.getHeadCompanyCasesData();
        this.getHeadCompanyCasesData('week');
        this.getHeadCompanyCasesData('month');
      },120000)

      window.onkeydown=(ev)=>{
        ev=ev||window.event;
        if(ev.keyCode==122){
           this.isFull=!this.isFull;
           setTimeout(()=>{
             this.$Bus.$emit('WinResize');
           },200)
        }
      }
      setTimeout(() => {
        window.onresize = () => {
          this.$Bus.$emit('WinResize');          
        };
      }, 200);
      this.canvasFun();
      this.$Bus.$emit('Loading', false);
    },
    beforeDestroy(){
      window.onresize=null;
      this.$Bus.$off('companyData');
      this.$Bus.$off('realHeaderDataChange');
      clearInterval(this.refresh);
    },
    watch: {},
    methods:{
      //获总公司取指标接口
      getHeadCompanyKpis(id,org_type = 1){
        let url='/sys/report_assist/get_indicator_list'
        let data = {
          org_id_list : Array.of(id),
          org_type : org_type,
        }
        this.$api.post(url,data)
        .then(data=>{
          if(data){
            this.headCompanyKPIlist = data.data.map(x=>{
              return x.key
            })
            // console.log(this.headCompanyKPIlist,'headCompanyKPIlist');
            this.getHeadCompanyCasesData();
            this.getHeadCompanyCasesData('week');
            this.getHeadCompanyCasesData('month');
          }
          else{
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
          // this.removeData();
          console.log(err,'企业下无指标');
        })

      },
      //获总公司取指标接口
      getKpis(id,org_type = 1){
        let url='/sys/report_assist/get_indicator_list'
        let params = {
          org_id_list : id,
          org_type :org_type,
        }
        this.$api.post(url,params)
        .then(data=>{
          if(data){
            this.KPIlist = data.data.map(x=>{
              return x.key
            })
            // console.log(this.KPIlist,'KPIlist');
            this.getRankPassengerFlow();//获取案场客流排行榜数据
            this.getRankSale();//获取案场销售排行榜数据
            this.getCompanyData();
            this.getCompanyAvg();
            this.getCompanyAvgRank();
            //判断id是企业还是案场
            if (this.realHeaderData.idsType) {
              this.getFullTimeCaseData()
            } else {
              this.getFullTimeCompanyData()
            }
          }
          else{
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
          // this.removeData();
          console.log(err,'企业下无指标');
        })

      },
      //据  同比 头部数据 默认为天      //听
      getHeadCompanyCasesData(timeBuck='day'){
        let tb='week';
        let hb='day';
        let str_day=moment().format('YYYY-MM-DD');
        let end_day=moment().format('YYYY-MM-DD');
        let str_hm='00:00';
        let end_hm=moment().format('HH:mm');
        // let end_hm='23:59';
        switch(timeBuck)
        {
          case 'day':{
            break;
          }
          case 'week':{
            tb='week';
            hb='day';
            const weekOfday = moment().format("E"); //计算今天是这周第几天
            str_day=moment().subtract(weekOfday - 1, "days").format("YYYY-MM-DD");
            end_day=moment().format('YYYY-MM-DD');
            str_hm='00:00';
            end_hm='23:59';
            break;
          }
          case 'month':{
            tb='year';
            hb='month';
            str_day=moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
            end_day=moment().format('YYYY-MM-DD');
            str_hm='00:00';
            end_hm='23:59';
            break;
          } 
        }

        // console.log(this.company_id,'id参数');
        let url = '/sys/report_ratio/full_time_report_company?tags=' + this.global.tags + '&indicator_keys=enters,actual_sales&huanbi_type='+hb+'&tongbi_type='+tb+'&start_day=' + str_day + '&end_day='+ end_day +
          '&start_hm='+ str_hm + '&end_hm=' + end_hm;
        let params = {
          company_id_list : Array.of(this.company_id)
        }
        this.$api.post(url,params)//企业分布报表（根据父级企业查询）
        .then(data=>{
          // console.log(data,'企业分布报表');
          if(data){
            let _data = data.data
            if(_data){
              switch(timeBuck)
              {
                case 'day':{
                  this.changeSum('dayFlow', _data.sum_list[0].enters, this.headData.day.sumFlow.enters)
                  this.headData.day.sumFlow={
                    enters:_data.sum_list[0].enters, //今日总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('daySale', _data.sum_list[0].actual_sales, this.headData.day.sumSale.sale)
                  this.headData.day.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                }   
                case 'week':{
                  this.changeSum('weekFlow', _data.sum_list[0].enters, this.headData.week.sumFlow.enters)
                  this.headData.week.sumFlow={
                    enters:_data.sum_list[0].enters, //今日总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('weekSale', _data.sum_list[0].actual_sales, this.headData.week.sumSale.sale)
                  this.headData.week.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                }  
                case 'month':{
                  this.changeSum('monthFlow', _data.sum_list[0].enters, this.headData.month.sumFlow.enters)
                  this.headData.month.sumFlow={
                    enters:_data.sum_list[0].enters, //今日总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('monthSale', _data.sum_list[0].actual_sales, this.headData.month.sumSale.sale)
                  this.headData.month.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                } 
              }
            }else{
              switch(timeBuck)
              {
                case 'day':{
                  this.changeSum('dayFlow', 0, this.headData.day.sumFlow.enters)
                  this.changeSum('daySale', 0, this.headData.day.sumSale.sale)
                  this.headData.day.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.day.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'week':{
                  this.changeSum('weekFlow', 0, this.headData.week.sumFlow.enters)
                  this.changeSum('weekSale', 0, this.headData.week.sumSale.sale)
                  this.headData.week.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.week.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'month':{
                  this.changeSum('dayFlow', 0, this.headData.month.sumFlow.enters)
                  this.changeSum('daySale', 0, this.headData.month.sumSale.sale)
                  this.headData.month.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.month.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
              }
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //获取企业数据
      getCompanyData() {
        let ids = this.realHeaderData.idsType ? this.realHeaderData.case_ids : this.realHeaderData.company_ids;
        ids = ids.split(',');
        let url = '/sys/report_range/time-division-report-case-company-by-companyids-or-caseids?&&tags=' + this.global.tags +
          '&indicator_keys=enters,actual_sales,sold_rate&start_day=' + this.realHeaderData.start_day + '&end_day=' + this.realHeaderData.end_day +
          '&start_hm=' + this.start_hm + '&end_hm=' + this.end_hm;
        let params = {
          org_id_list: ids,
          org_type: this.realHeaderData.idsType + 1
        }
        this.$api.post(url,params)//案场分时报表(根据企业ID数组或案场ID数组)
        .then(data => {
          if (data) {
            let _data = data.data;
            if(_data){
              let sum_list = _data.sum_list || []
              let xData = [];
              let yData = {};
              let ySaleData = {};

              yData.entersToday = [];
              yData.actual_sales = [];
              ySaleData.actual_sales = [];
              ySaleData.sold_rate = [];
              for (let i in sum_list) {
                xData.push(sum_list[i].time_tag);
                yData.entersToday.push(sum_list[i].enters);//进入人数
                yData.actual_sales.push(sum_list[i].actual_sales);//销售金额
                ySaleData.actual_sales.push(sum_list[i].actual_sales);//销售金额
                ySaleData.sold_rate.push(sum_list[i].sold_rate);//成交率
              }
              this.companyPassengerFlowData.xData = [...new Set(xData)]
              this.companyPassengerFlowData.yData = yData
              this.companySaleData.xData = [...new Set(xData)]
              this.companySaleData.yData = ySaleData
            }else{
              this.companyPassengerFlowData.xData = []
              this.companyPassengerFlowData.yData = []
              this.companySaleData.xData = []
              this.companySaleData.yData = []
            }
            this.$nextTick(() => {
              this.$refs.companyPassengerFlowRef.setOption()
              this.$refs.companySaleRef.setOption()
            })
          }
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //客流排行榜数据
      getRankPassengerFlow() {
        if(!this.KPIlist.includes('enters')) return
        let ids = this.realHeaderData.idsType ? this.realHeaderData.case_ids : this.realHeaderData.company_ids
        let ranking_num = 8;
        let indicator_key = 'enters'
        ids = ids.split(',')
        let url = '/sys/report_range/case-ranking-companyids-or-caseids?indicator_key=' + indicator_key + '&tags=' + this.global.tags + '&ranking_num=' + ranking_num +
         "&start_day=" + this.realHeaderData.start_day + "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let params = {
          org_id_list: ids,
          org_type : this.realHeaderData.idsType + 1,
        }
        this.$api.post(url,params)
        .then(data => {
          if(data){
            if (data.data != null && Object.keys(data.data).length > 0) {
              let rank8 = [];
              for (let i = 0; i < data.data.top_list.length; i++) {
                let model = {};
                model.name = data.data.top_list[i].case_info_name;
                model.value = data.data.top_list[i].enters
                model.unit = reportGlobal.unit['enters']
                rank8.push(model);
              }
              this.RankTop8.passengerFlow = rank8;
            } else {
              this.RankTop8.passengerFlow = []
              // console.log("企业下无数据");
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err => {
           console.log(err);
          this.$Bus.$emit('Loading', false);
        });
      },
      //销售排行榜数据
      getRankSale(){
        if(!this.KPIlist.includes('actual_sales')) return
        let ids = this.realHeaderData.idsType ? this.realHeaderData.case_ids : this.realHeaderData.company_ids
        let ranking_num = 8;
        let indicator_key = 'actual_sales'
        ids = ids.split(',')
        let url = '/sys/report_range/case-ranking-companyids-or-caseids?indicator_key=' + indicator_key +
          '&tags=' + this.global.tags + '&ranking_num=' + ranking_num +
          "&start_day=" + this.realHeaderData.start_day + "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let params = {
          org_id_list: ids,
          org_type : this.realHeaderData.idsType + 1,
        }
        this.$api.post(url,params)
        .then(data => {
          if(data){
            if (data.data != null && Object.keys(data.data).length > 0) {
              let rank8 = [];
              for (let i = 0; i < data.data.top_list.length; i++) {
                let model = {};
                model.name = data.data.top_list[i].case_info_name;
                model.value = data.data.top_list[i].actual_sales
                model.unit = reportGlobal.unit['actual_sales']
                rank8.push(model);
              }
              this.RankTop8.sale = rank8;
            } else {
              this.RankTop8.sale = []
              // console.log("企业下无数据");
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err => {
           console.log(err);
          this.$Bus.$emit('Loading', false);
        });
      },
      //多企业获取同比环比数值
      getFullTimeCompanyData(){
        let url = '/sys/report_ratio/full_time_report_company?company='+ this.realHeaderData.company_ids + '&tags='+ this.global.tags +
          '&indicator_keys=enters,actual_sales,guest_avg_price,sold_rate&huanbi_type=day&tongbi_type=year'+
        "&start_day=" + this.realHeaderData.start_day + "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let prarms = {
          company_id_list : this.realHeaderData.company_ids.split(',')
        }
        this.$api.post(url,prarms)
        .then(data=>{
          if(data){
            // console.log(data);
            let _data = data.data
            if(_data){
              _data.item_list.sort((x,y)=>{
                if(x.enters < y.enters){
                  return 1;
                }
                if (x.enters > y.enters) {
                  return -1
                }
                return 0
              });
              this.item_list = _data.item_list.map(x=>{
                if(x.sold_rate){
                  x.sold_rate = x.sold_rate + '%'
                }
                return x
              })
              this.sumEnt.atv = _data.sum_list[0].enters;
              this.sumSale.atv = _data.sum_list[0].actual_sales;
              this.sumATV.atv = _data.sum_list[0].guest_avg_price;
              this.sumSold.atv = _data.sum_list[0].sold_rate;
              if(this.realHeaderData.end_day == this.end_day){
                this.sumEnt.tb = null
                this.sumEnt.hb = null
                this.sumSale.tb = null
                this.sumSale.hb = null
                this.sumATV.tb = null
                this.sumATV.hb = null
                this.sumSold.tb = null
                this.sumSold.hb = null
              }else{
                this.sumEnt.tb = _data.sum_list[0].enters_tb
                this.sumEnt.hb = _data.sum_list[0].enters_hb
                this.sumSale.tb =_data.sum_list[0].actual_sales_tb
                this.sumSale.hb =_data.sum_list[0].actual_sales_hb
                this.sumATV.tb =_data.sum_list[0].guest_avg_price_tb
                this.sumATV.hb =_data.sum_list[0].guest_avg_price_hb
                this.sumSold.tb =_data.sum_list[0].sold_rate_tb
                this.sumSold.hb =_data.sum_list[0].sold_rate_hb
              }
            }else{
              this.item_list = [];
              this.sumEnt = {
                atv: "",
                tb: null,
                hb: null,
              }
              this.sumSale = {
                atv: "",
                tb: null,
                hb: null,
              }
              this.sumATV = {
                atv: "",
                tb: null,
                hb: null,
              }
              this.sumSold = {
                sold: "",
                tb: null,
                hb: null,
              }
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //多案场获取同比环比数值
      getFullTimeCaseData(){
        let case_id_list = this.realHeaderData.case_ids.split(',')
        if(case_id_list.length){
          let url = '/sys/report_ratio/full_time_report_case?tags='+ this.global.tags + '&indicator_keys='+ this.KPIlist +
            '&huanbi_type=day&tongbi_type=year&start_day=' + this.realHeaderData.start_day +
            "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
          let params = {
            case_info_id_list : case_id_list
          }
          this.$api.post(url,params)
          .then(data=>{
            // console.log(data,'多案场获取同比环比数值');
            if(data){
              let _data = data.data
              if(_data){
                _data.item_list.sort((x,y)=>{
                  if(x.enters < y.enters){
                    return 1;
                  }
                  if (x.enters > y.enters) {
                    return -1
                  }
                  return 0
                });
                this.item_list = _data.item_list.map(x=>{
                  if(x.sold_rate){
                    x.sold_rate = x.sold_rate + '%'
                  }
                  return x
                })

                this.sumEnt.atv = _data.sum_list[0].enters
                this.sumSale.atv = _data.sum_list[0].actual_sales
                this.sumATV.atv = _data.sum_list[0].guest_avg_price
                this.sumSold.atv = _data.sum_list[0].sold_rate
                if(this.realHeaderData.end_day == this.end_day){
                  this.sumEnt.tb = null
                  this.sumEnt.hb = null
                  this.sumSale.tb = null
                  this.sumSale.hb = null
                  this.sumATV.tb = null
                  this.sumATV.hb = null
                  this.sumSold.tb = null
                  this.sumSold.hb = null
                }else{
                  this.sumEnt.tb = _data.sum_list[0].enters_tb
                  this.sumEnt.hb = _data.sum_list[0].enters_hb
                  this.sumSale.tb =_data.sum_list[0].actual_sales_tb
                  this.sumSale.hb =_data.sum_list[0].actual_sales_hb
                  this.sumATV.tb =_data.sum_list[0].guest_avg_price_tb
                  this.sumATV.hb =_data.sum_list[0].guest_avg_price_hb
                  this.sumSold.tb =_data.sum_list[0].sold_rate_tb
                  this.sumSold.hb =_data.sum_list[0].sold_rate_hb
                }
              }else{
                this.item_list = [];
                this.sumEnt = {
                  atv: "",
                  tb: null,
                  hb: null,
                }
                this.sumSale = {
                  atv: "",
                  tb: null,
                  hb: null,
                }
                this.sumATV = {
                  atv: "",
                  tb: null,
                  hb: null,
                }
                this.sumSold = {
                  sold: "",
                  tb: null,
                  hb: null,
                }
              }
            }
            this.$Bus.$emit('Loading', false);
          })
          .catch(err=>{
             console.log(err);
            this.$Bus.$emit('Loading', false);
          })
        }
      },
      //获取城市均值
      getCompanyAvg(){
        //当选择了案场的时候则不调用该接口
        if(this.realHeaderData.idsType == 1) {
          return
        }
        if(!this.KPIlist.includes('enters') && !this.KPIlist.includes('actual_sales')) return;
        let indicator_key = ['enters','actual_sales']
        let company_ids = this.realHeaderData.company_ids.split(',')
        let url = '/sys/report_range/case_avg_by_company?tags=' + this.global.tags + '&indicator_keys=' + indicator_key + '&sort_key=actual_sales&sort_type=desc'+
          "&start_day=" + this.realHeaderData.start_day + "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let paramse = {
          company_id_list : company_ids
        }
        this.$api.post(url,paramse)
        .then(data=>{
          // console.log(data);
          if(data){
            if(data.data){
              let item_list = data.data.item_list;
              let xData = [];
              let yData = {
                enters:[],
                actual_sales:[]
              };
              for(let i in item_list){
                xData.push(item_list[i].company_name)
                yData.enters.push(item_list[i].enters)
                yData.actual_sales.push(item_list[i].actual_sales)
              }
              this.cityAvgData.xData = xData
              this.cityAvgData.yData = yData;
            }else{
              this.cityAvgData.xData = [];
              this.cityAvgData.yData = [];
            }
            this.$nextTick(() => {
              this.$refs.cityAvgData.setOption()
            })
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //获取城市均值排行榜
      getCompanyAvgRank(){
        //当选择了案场的时候则不调用该接口
        if(this.realHeaderData.idsType == 1) {
          this.RankTop8.companyAvg = []
          return
        }
        if(!this.KPIlist.includes('enters')) return;
        let indicator_key = 'enters'
        let company_ids = this.realHeaderData.company_ids.split(',')
        let ranking_num = 8;
        let url = '/sys/report_range/company_avg_ranking_list?tags=' + this.global.tags +
          '&indicator_key=' + indicator_key + '&ranking_num=' + ranking_num +
          "&start_day=" + this.realHeaderData.start_day + "&end_day=" + this.realHeaderData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let params = {
          company_id_list:company_ids
        }
        this.$api.post(url,params)
        .then(data=>{
          if(data){
            if (data.data != null && Object.keys(data.data).length > 0) {
              let rank8 = [];
              for (let i = 0; i < data.data.top_list.length; i++) {
                let model = {};
                model.name = data.data.top_list[i].company_name;
                model.value = data.data.top_list[i].enters
                model.unit = reportGlobal.unit['enters']
                rank8.push(model);
              }
              this.RankTop8.companyAvg = rank8;
            } else {
              this.RankTop8.companyAvg = []
              // console.log("企业下无数据");
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      IsFull() {
        let isFull = window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        //to fix : false || undefined == undefined
        if (isFull === undefined) {isFull = false;}
        return isFull;
      },
      FullClick() {
        this.isFull = !this.isFull;
        setTimeout(() => {
          this.$Bus.$emit('WinResize');
        }, 200)
        this.$nextTick(() => {
          let docElm = document.documentElement;
          //W3C   
          //是否全屏
          if (!this.IsFull()) {
            if (docElm.requestFullscreen) {
              docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
              docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
              docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
              docElm.msRequestFullscreen();
            }
          } else {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          }
        })
      },
      //canvas
      canvasFun() {
        var canvas = document.getElementById('canvas'),
          ctx = canvas.getContext('2d'),
          w = canvas.width = window.innerWidth,
          h = canvas.height = window.innerHeight,

          hue = 217,
          stars = [],
          count = 0,
          maxStars = 500;//星星数量

        var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.025, '#CCC');
        gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addColorStop(1, 'transparent');

        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();

        // End cache

        function random(min, max) {
          if (arguments.length < 2) {
            max = min;
            min = 0;
          }

          if (min > max) {
            var hold = max;
            max = min;
            min = hold;
          }

          return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function maxOrbit(x, y) {
          var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
          return diameter / 2;
          //星星移动范围，值越大范围越小，
        }

        var Star = function() {
          this.orbitRadius = random(maxOrbit(w, h));
          this.radius = random(60, this.orbitRadius) / 8;
          //星星大小
          this.orbitX = w / 2;
          this.orbitY = h / 2;
          this.timePassed = random(0, maxStars);
          this.speed = random(this.orbitRadius) / 500000;
          //星星移动速度
          this.alpha = random(2, 10) / 10;

          count++;
          stars[count] = this;
        }
        Star.prototype.draw = function() {
          var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

          if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
          } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
          }

          ctx.globalAlpha = this.alpha;
          ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
          this.timePassed += this.speed;
        }
        for (var i = 0; i < maxStars; i++) {
          new Star();
        }
        function animation() {
          ctx.globalCompositeOperation = 'source-over';
          ctx.globalAlpha = 0.5; //尾巴
          ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
          ctx.fillRect(0, 0, w, h);
          ctx.globalCompositeOperation = 'lighter';
          for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
          };
          window.requestAnimationFrame(animation);
        }
        animation();
      },
      changeSum(id, newVal, oldVal) {
        let numBox = document.getElementById(id);
        let speed = parseInt((newVal - oldVal) / 50 + (Math.random() * 10))

        // console.log(speed,'speed');
        /**
         * 数字滚动
         * @param {Object} num    开始值
         * @param {Object} maxNum  最大值,最终展示的值
         */
        function numRunFun(num, maxNum) {
          let numText = num;
          let golb; // 为了清除requestAnimationFrame
          function numSlideFun() {
            numText += speed; // 速度的计算可以为小数
            if (numText >= maxNum) {
              numText = maxNum;
              cancelAnimationFrame(golb);
              numBox.innerHTML = (numText);
            } else {
              golb = requestAnimationFrame(numSlideFun);
              numBox.innerHTML = ~~(numText)
            }
          }

          numSlideFun();
        }

        // 运行
        numRunFun(oldVal, newVal)
      }
    },
  }
</script>

